<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>规格管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../js/pages/public.js"></script>

</head>

<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->
<div class="box-header with-border">
    <h3 class="box-title">规格管理</h3>
</div>
<div class="box-body">
    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#editModal"><i class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" class="btn btn-default" title="删除" onclick="deleteSpec()"><i class="fa fa-trash-o"></i> 删除</button>

                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">
                <form id="specid">
                    规格名称：<input name="specName">
                    <button class="btn btn-default" type="button" onclick="getSpec()">查询</button>
                </form>
            </div>
        </div>
        <!--工具栏/-->
        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">规格ID</th>
                <th class="sorting">规格名称</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="spec">

            </tbody>
        </table>
        <p>
            <a onclick="getByPage(1)">首页</a>
            <a onclick="getByPage(2)">上一页</a>
            当前第<input id="dang" name="pageNum" size="1" value="1">页数据/每页<input id="gong" name="pageSize" size="1" value="5">条数据
            <a onclick="getByPage(3)">下一页</a>
            <a onclick="getByPage(4)">末页</a>
        </p>
        <!--数据列表/-->
    </div>
    <!-- 数据表格 /-->
</div>
<!-- /.box-body -->

<!-- 新增窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">规格编辑</h3>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>规格名称</td>
                        <td><input class="form-control" name="specName" id="specName" placeholder="规格名称"></td>
                    </tr>
                </table>
                <!-- 规格选项 -->
                <div class="btn-group">
                    <button type="button" class="btn btn-default" onclick="addBG()" title="新建"><i
                            class="fa fa-file-o"></i> 新增规格选项
                    </button>
                </div>
                <table id="specTable" class="table table-bordered table-striped table-hover dataTable">
                    <thead>
                    <th class="sorting">规格选项</th>
                    <th class="sorting">排序</th>
                    <th class="sorting">操作</th>
                    </thead>
                    <tbody id="specOption">

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" onclick="addSpec()" aria-hidden="true">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" onclick="deleteBg()">关闭</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="editModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
</body>
<script>

    $(function () {
        getSpec();
    })

    function getSpec() {
        var parms = $("#specid").serializeObject();
        //console.log(parms);
        var page = {
            "pageSize":$("#gong").val(),
            "pageNum":$("#dang").val(),
            "parm":parms
        }
        var token = window.localStorage.getItem("token")
        //查询信息
        $.ajax({
            url: domain + '/spec/specList',
            dataType: "json",
            contentType: "application/json; charset=utf-8",//这个是告诉后台我传的是json过去的
            headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
            type: "post",
            async: false,
            data: JSON.stringify(page),
            success: function (result) {
                var data = result.data.rows;
                if (result.code == 0) {
                    var html = '';
                    $(data).each(function (i, e) {
                        html += '<tr>'
                        html += '	<td><input type="checkbox" name="box" value="' + e.id + '"></td>'
                        html += '	<td>' + e.id + '</td>'
                        html += '	<td>' + e.specName + '</td>'
                        html += '	<td class="text-center">'
                        html += '		<button type="button" class="btn bg-olive btn-xs" onclick="getBySpecId(' + e.id + ')" data-toggle="modal" data-target="#editModal1">修改'
                        html += '		</button>'
                        html += '		</td>'
                        html += '	</tr>'
                    })
                    $("#spec").html(html)
                }
            }
        })
    }

    function getByPage(id){
        var dang = $("#dang").val();
        var gong = $("#gong").val();
        if (id==1){//首页
            if (dang==1){
                return;
            }else{
                $("#dang").val(1);
            }
        }else if (id==2){//上一页
            if (dang==1){
                return;
            }else{
                $("#dang").val(parseInt(dang)-1);
            }
        }else if (id==3){//下一页
            if (dang==gong){
                return;
            }else{
                $("#dang").val(parseInt(dang)+1);
            }
        }else if (id==4){//末页
            if (dang==gong){
                return;
            }else{
                $("#dang").val(gong);
            }
        }
        getSpec();
    }

    //增加bg
    function addBG() {
        var html = '';
        html += '<tr>'
        html += '<td>'
        html += '<input class="form-control" placeholder="规格选项">'
        html += '</td>'
        html += '<td>'
        html += '<input class="form-control" placeholder="排序">'
        html += '</td>'
        html += '<td>'
        html += '<button type="button" class="btn btn-default" onclick="deleteThis(this)" title="删除"><i class="fa fa-trash-o"></i> 删除</button>'
        html += '</td>'
        html += '</tr>'
        $("#specOption").append(html);
    }

    //删除bg
    function deleteThis(aa) {
        if (confirm("确定删除吗？")) {
            var tr = aa.parentNode.parentNode;//获取上一个节点,上一个节点,就是本节点的爷爷
            tr.parentNode.removeChild(tr);//爷爷的爷爷删除爷爷
        }
    }

    function deleteBg() {
        window.location.reload();
    }

    //增加
    function addSpec(){
        //规格名字
        var specName = $("#specName").val();
        console.log(specName)
        //获取tabled对象 通过find搜索tr获取所有的行
        var trs = $("#specTable").find("tr");
        var optionList = []; //js中表示集合数组
        for (var i = 1; i < trs.length; i++) {
            var tds = $(trs[i]).find("td");
            var option = {//在js中表示对象 json对象
                optionName:$(tds[0]).find("input").val(), //获取第一个input的值
                orders:$(tds[1]).find("input").val(),
            }
            optionList.push(option);
        }
        var vo = {
            "specName":specName,
            "specificationOptionVO":optionList
        }
        $.ajax({
            url: domain+'/spec/add',
            dataType: "json",
            contentType: "application/json; charset=utf-8",//这个是告诉后台我传的是json过去的
            headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
            type:"post",
            async: false,
            data:JSON.stringify(vo),
            success: function (result) {
                console.log(result)
                var data = result.data;
                if (result.code==0){
                    alert(result.message)
                    window.location.reload();
                }
            },
            error: function (result) {
                alert("系统错误")
            }
        })
    }

    //回显
    function getBySpecId(id) {
        $.ajax({
            url: domain + '/spec/selectById?id=' + id,
            dataType: "json",
            // contentType: "application/json; charset=utf-8",//这个是告诉后台我传的是json过去的
            headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
            type: "post",
            async: false,
            success: function (result) {
                var data = result.data;
                if (result.code == 0) {
                    var html = '';
                    html += '<div class="modal-dialog" >'
                    html += '<div class="modal-content">'
                    html += '<div class="modal-header">'
                    html += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'
                    html += '<h3 id="myModalLabel">规格编辑</h3>'
                    html += '</div>'
                    html += '<div class="modal-body">'
                    html += '<table class="table table-bordered table-striped"  width="800px">'
                    html += '<input id="updateId" type="hidden" name="updateId" class="form-control" value="' + data.id + '" >'
                    html += '<tr>'
                    html += '<td>规格名称</td>'
                    html += '<td><input id="updateSpecName" name="updateSpecName" class="form-control" value="' + data.specName + '" placeholder="规格名称" >  </td>'
                    html += '</tr>'
                    html += '</table>'
                    html += '<!-- 规格选项 -->'
                    html += '<div class="btn-group">'
                    html += '<button type="button" class="btn btn-default" onclick="addSpecOptionHtm2()" title="新建" ><i class="fa fa-file-o"></i> 新增规格选项</button>'
                    html += '</div>'
                    html += '<table class="table table-bordered table-striped table-hover dataTable">'
                    html += '<thead>'
                    html += '<tr>'
                    html += '<th class="sorting">规格选项</th>'
                    html += '<th class="sorting">排序</th>'
                    html += '<th class="sorting">操作</th>'
                    html += '</tr>'
                    html += '</thead>'
                    html += '<tbody id="specOption2">'
                    $(data.specificationOptionVO).each(function (i, e) {
                        html += '<input value="' + e.id + '"  type="hidden" class="form-control">'
                        html += '<input value="' + e.specId + '"  type="hidden" class="form-control" placeholder="规格选项">'
                        html += '<tr>'
                        html += '<td>'
                        html += '<input value="' + e.optionName + '" class="form-control" placeholder="规格选项">'
                        html += '</td>'
                        html += '<td>'
                        html += '<input value="' + e.orders + '" class="form-control" placeholder="排序">'
                        html += '</td>'
                        html += '<td>'
                        html += '<button type="button" class="btn btn-default" onclick="delThis(' + e.id + ')" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>'
                        html += '</td>'
                        html += '</tr>'
                    })
                    html += '</tbody>'
                    html += '</table>'
                    html += '</div>'
                    html += '<div class="modal-footer">'
                    html += '<button class="btn btn-success" onclick="update(' + data.id + ')" data-dismiss="modal" aria-hidden="true">保存</button>'
                    html += '<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>'
                    html += '</div>'
                    html += '</div>'
                    html += '</div>'
                    $("#editModal1").html(html);
                }
            }
        })
    }

    function addSpecOptionHtm2(){
        var html = '';
        html += '<tr>'
        html += '<td>'
        html += '<input class="form-control" placeholder="规格选项">'
        html += '</td>'
        html += '<td>'
        html += '<input class="form-control" placeholder="排序">'
        html += '</td>'
        html += '<td>'
        html += '<button type="button" class="btn btn-default" onclick="deleteThis(this)" title="删除"><i class="fa fa-trash-o"></i> 删除</button>'
        html += '</td>'
        html += '</tr>'
        $("#specOption2").append(html);
    }

    function delThis(id){
        if (confirm("确定删除吗？")){
            $.ajax({
                url: domain + '/spec/delThis?id=' + id,
                dataType: "json",
                // contentType: "application/json; charset=utf-8",//这个是告诉后台我传的是json过去的
                headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
                type: "delete",
                async: false,
                success: function (result) {
                    var data = result.data;
                    if (result.code == 0) {
                        alert("删除成功")
                        window.location.reload();
                    }
                },
                error: function (result) {
                    alert("系统出错!")
                }
            })
        }
    }

    //修改
    function update(id) {
        var trs = $("#specOption2").find('tr');
        var arr = [];
        $(trs).each(function (i, e) {
            var tds = $(e).find('td');
            var option = {optionName:$(tds[0]).find('input').val(),orders:$(tds[1]).find('input').val()};
            arr.push(option)
        })
        var spec = {
            "id":id,
            "specName":$('#updateSpecName').val(),
            "specificationOptionVO":arr
        };
        $.ajax({
            url: domain + '/spec/update',
            contentType: "application/json; charset=utf-8",//这个是告诉后台我传的是json过去的
            headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
            type: "put",
            dataType: "json",
            data:JSON.stringify(spec),
            async: false,
            success: function (result) {
                if (result.code == 0) {
                    alert("更新成功")
                    window.location.reload();
                }
            },
            error: function (result) {
                alert("系统错误")
            }
        })
    }

    //删除
    function deleteSpec() {
        var ids = []  //定义一个数组
        $("[type=checkbox]").each(function (i, e) {   //获取所有复选框的value,循环
            if ($(e).prop("checked")) {   //判断是否被选中
                ids.push($(e).val())  //选中就添加到数组中
            }
        })
        $.ajax({
            url: domain + '/spec/delete',
            dataType: "json",
            contentType: "application/json; charset=utf-8",//这个是告诉后台我传的是json过去的
            headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
            data:JSON.stringify(ids),
            type: "delete",
            async: false,
            success: function (result) {
                var data = result.data;
                if (result.code == 0) {
                    alert("删除成功")
                    window.location.reload();
                }
            },
            error: function (result) {
                alert("系统出错!")
            }
        })
    }
</script>
</html>